<template>
	<div class="All">
		<div class="Centent">
			<!-- 头皮屑 -->
			<el-tabs class="Tabs" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="我学的课" name="first">
					<!-- 全部课程 -->
					<div class="All_course">

						<!-- 操作栏 -->
						<div class="All_course-head">
							<!-- 头部按钮 -->
							<!-- <div class="Head-BTN">
                <div class="addcourse">
                  <i class="el-icon-plus"></i>
                  <span>添加课程</span>
                </div>
                <div class="addfile">
                  <span>新建文件夹</span>
                </div>
              </div> -->

							<!-- 头部搜索框 -->
							<div class="Head-Search">
								<el-input placeholder="搜索" suffix-icon="el-icon-search" v-model="input1" clearable
									style="cursor: pointer;">
								</el-input>
							</div>
						</div>

						<!-- 课程列表 -->
						<div class="item_course">
							<div class="itemList" v-if="courseList.length == 0">
								<el-empty description="空数据"></el-empty>
							</div>
							<div class="itemList" v-else v-for="(item,index) in courseList" :key="index"
								@click="tuchCouse(item)">
								<div class="ItemImg">
									<div v-if="item.class_img == null">
										<img class="img" src="../../../assets/20201019044625480.jpg">
									</div>
									<div v-else>
										<img class="img" :src="item.class_img">
									</div>
									<p class="load" :style="{'display':item.start_time <= item.end_time ? 'none':''}">
										课程已结束</p>
								</div>
								<div class="ItemTit">
									<span>{{ item.title }}</span>
								</div>
								<div class="Item_name">
									<span>课程时间：</span>
									<div class="" style="margin-top: 10px">
										<span>{{ item.start_time }}</span>
										<span> 至 </span>
										<span>{{ item.end_time }}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="已完成的课" name="second">
					<!-- 全部课程 -->
					<div class="All_course">

						<!-- 操作栏 -->
						<div class="All_course-head">
							<!-- 头部按钮 -->
							<!-- <div class="Head-BTN">
                <div class="addcourse">
                  <i class="el-icon-plus"></i>
                  <span>添加课程</span>
                </div>
                <div class="addfile">
                  <span>新建文件夹</span>
                </div>
              </div> -->

							<!-- 头部搜索框 -->
							<div class="Head-Search">
								<el-input placeholder="搜索" suffix-icon="el-icon-search" v-model="input1" clearable
									style="cursor: pointer;">
								</el-input>
							</div>
						</div>
						<!-- 课程列表 -->
						<div class="item_course">
							<div class="itemList" v-if="overcourse.length == 0">
								<el-empty description="空数据"></el-empty>
							</div>
							<div class="itemList" v-for="(overitem,overindex) in overcourse" :key="overindex">
								<div class="ItemImg">
									<img class="img" src="../../../assets/20201019044625480.jpg">
									<p class="load" :style="{'display':overitem.state == 0 ? 'none':''}">课程已结束</p>
								</div>
								<div class="ItemTit">
									<span>{{ overitem.title }}</span>
								</div>
								<div class="Item_name">
									<span>课程时间：</span>
									<span>{{ overitem.time }}</span>
								</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input1: '', // 顶部搜索框
				activeName: 'first', // 头皮屑首显示页面
				courseList: [ //课程列表

				],
				major: [],
				overcourse: []
			}
		},
		methods: {
			//数据查询
			getCourse() {
				this.$axios.post('https://vvv.52ecode.cn/api/v1.StudentClass/index', {
					website_id: 1,
					major_id: this.major.major_id
				}).then(res => {
					this.courseList = res.data.data
				}).catch(err => {
					console.log(err);
				})
			},

			handleClick(tab, event) {

				// console.log(tab, event);
			},
			tuchCouse(item) {
				// console.log(item)
				sessionStorage.setItem("classInfoV", JSON.stringify(item))
				this.$router.push('courseTask')
			}
		},
		created() {
			this.major = JSON.parse(sessionStorage.getItem('InfoMation'))
			this.overcourse = this.courseList.filter(item => item.start_time <= item.end_time)
			this.getCourse()
		}
	}
</script>

<style lang="scss" scoped>
	.All {
		padding: 30px;
		background-color: #f2f4f7;

		.Centent {
			background-color: #fff;
			border-radius: 10px;
			padding: 20px;

			.Tabs {
				.All_course {
					.All_course-head {
						margin: 15px;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.Head-BTN {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.addfile:hover {
								background-color: #eaf0ff;
							}

							div:nth-child(1) {
								cursor: pointer;
								border-radius: 50px;
								color: #fff;
								background-image: linear-gradient(to right, #68a6ff, #606dff);
								padding: 10px;
								box-shadow: 0 0 5px #637fff;

								i {
									margin-right: 5px;
								}
							}

							.addfile {
								cursor: pointer;
								border-radius: 50px;
								color: #42a7ff;
								border: 1px solid #42a7ff;
								padding: 10px;
								margin-left: 30px;

							}
						}
					}

					.item_course {
						display: flex;
						align-items: center;
						justify-content: space-around;
						flex-wrap: wrap;

						// background: #000;
						.itemList:hover {
							color: #0074D9;
						}

						.itemList {
							cursor: pointer;
							margin: 20px 0;

							// background: #000;
							.ItemImg {
								position: relative;
								// background: #000;
								border-radius: 10px;
								width: 240px;
								height: 130px;

								.load {
									position: absolute;
									left: 0;
									top: 0;
									right: 0;
									display: flex;
									align-items: center;
									justify-content: center;
									height: 100%;
									color: #fff;
									background-color: rgba(0, 0, 0, .5);
									border-radius: 10px;
								}

								.img {
									// opacity: 0.6;
									width: 240px;
									height: 130px;
									border-radius: 10px;
									display: block;

								}
							}

							.ItemImg:hover {
								box-shadow: 0 0 10px #BBBBBB;
								border-radius: 10px;
							}

							.ItemTit {
								font-weight: bold;
								width: 240px;
								margin: 10px 0;
								font-size: 16px;
							}

							.Item_name {
								display: flex;
								flex-direction: column;
								font-size: 12px;
								color: #8A8B99;
							}
						}
					}
				}
			}
		}
	}
</style>
